<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-06-16 11:10:18
 * @LastEditors: xw908163987
 * @LastEditTime: 2023-12-06
-->
<template>
  <div style="height: auto">
    <a-row>
      <template v-for="(item, index) in vouchers">
        <VoucherCard
          :key="index"
          :voucher="item"
          :index="index"
          :vouchersLength="vouchersLength"
          :printMethod="printMethod"
          :printColumns="printColumns"
        ></VoucherCard>
      </template>
    </a-row>
  </div>
</template>

<script>
import deleteIcon from '@/assets/images/configuration/delete.png';
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import selectedIcon from '@/assets/images/configuration/selected.png';
import VoucherCard from './VoucherCard.vue';
import i18n from '@/locales';
const options = {
  [i18n.t('userManage.printProfileName')]: 'XXXX',
  [i18n.t('userManage.printDownloadSpeed')]: '512Kbps',
  [i18n.t('userManage.printConcurrentDevices')]: '3',
  [i18n.t('userManage.printPeriod')]: i18n.tc('userManage.minutes', 30),
  [i18n.t('userManage.printDataQuota')]: '100MB',
  [i18n.t('userManage.printBindMac')]: 'Yes',
  [i18n.t('userManage.printUploadSpeed')]: '512Kbps',
};
export default {
  name: 'PrintPage',
  components: { VoucherCard },
  props: {
    value: Boolean,
    list: Array,
  },
  model: {
    prop: 'value',
    event: 'set',
  },
  data() {
    const checkboxOptions = [];
    for (let key in options) {
      checkboxOptions.push({
        label: key,
        value: key,
      });
    }
    return {
      displayPageBreakAfter: false,
      vouchers: [],
      vouchersLength: 0,
      printColumns: 2,
      printView: false,
      screenWidth: 0,
      screenHeight: 0,
      form: {},
      rules: {},
      checkboxOptions,
      params: [
        this.$t('userManage.printProfileName'),
        this.$t('userManage.printDownloadSpeed'),
        this.$t('userManage.printConcurrentDevices'),
        this.$t('userManage.printPeriod'),
      ],
      printMethod: 'printTwoColumn',
      text: '',

      expand: true,
      deleteIcon,
      logoList: [],
      selectedIcon,
      uploadLogoModalShow: false,
    };
  },
  created() {
    document.body.style.height = 'auto';
    document.querySelector('.feedback-block').style.display = 'none';
    document.querySelector('.router-view-main').style.paddingTop = '0px';
    document.querySelector('.leftMenu').style.display = 'none';
    document.querySelector('.topMenu').style.display = 'none';
    this.$store.commit('Layout/SET_LAYOUT', 'NONE');
    this.vouchers = window.opener.vouchers || [];
    this.vouchersLength = this.vouchers.length || '';
    this.printMethod = window.opener.printMethod || '';
    if (this.printMethod == 'printOneColumn') {
      this.printColumns = 1;
    } else if (this.printMethod == 'printTwoColumn') {
      this.printColumns = 2;
    } else {
      this.printColumns = 1;
    }
  },
  watch: {},
  computed: {},
  mounted() {
    window.print();
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.show {
  page-break-after: always;
}
</style>
